<template>
	<view class="apply-box">
		<view class="order-detail-box">
			<my-orderinfo :orderDetail="orderDetail"></my-orderinfo>
		</view>
		<view class="gap">
		</view>

		<!-- 退货信息 -->
		<view class="return-info">
			<view class="return-info-title">
				退货信息
			</view>

			<!-- 表单信息 -->
			<view class="return-form">
				<uni-forms :value="formData" ref="form">
					<uni-forms-item label="退货原因：" name="reason">
						<uni-easyinput type="text" v-model="formData.reason" placeholder="请描述退货原因" />
					</uni-forms-item>
					<uni-forms-item label="退货金额：" name="amount">
						<uni-easyinput type="number" v-model="formData.amount" placeholder="退货金额" />
					</uni-forms-item>
					<uni-forms-item label="快递公司：" name="compony">
						<uni-easyinput type="text" v-model="formData.company" placeholder="快递公司名称" />
					</uni-forms-item>
					<uni-forms-item label="快递单号：" name="oddNumber">
						<uni-easyinput type="text" v-model="formData.oddNumber" placeholder="快递单号" />
					</uni-forms-item>
				</uni-forms>

				<view class="submit-btn" @click="submitApply">
					提交
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					reason: '',
					amount: '',
					company: '',
					oddNumber: ''
				},
				orderDetail: {} // 订单详情
			};
		},
		onLoad(option) {
			console.log(JSON.parse(option.info))
			this.orderDetail = JSON.parse(option.info)
			this.formData.amount=this.orderDetail.orderPrice-this.orderDetail.hb
		},
		methods: {
			// 申请退货
			async submitApply() {
				if (this.formData.reason && this.formData.amount && this.formData.oddNumber && this.formData.company) {
					const {
						data: res
					} = await uni.$http.post('/order/thApply', {
						userId: this.userInfo._id,
						orderId: this.orderDetail._id,
						thMemo: this.formData.reason,
						tkAmount: this.formData.amount,
						tkKdCode: this.formData.oddNumber,
						tkKdName: this.formData.company
					})
					console.log(res)
					if (res.success == '0') {
						uni.$showMsg('申请已提交!')
						uni.navigateBack({
							delta: 0
						})
					}
					return
				} else {
					uni.$showMsg('请填写完整信息后再提交!')
					return
				}
			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.order-detail-box {
		// border-top: 1rpx solid #ededed;
		padding: 0 20rpx;

	}

	.gap {
		width: 100%;
		height: 16rpx;
		background: #F4F4F4;
	}

	.return-info-title {
		height: 110rpx;
		font-weight: bold;
		line-height: 110rpx;
		padding-left: 24rpx;
	}

	.return-form {
		padding: 0 24rpx;
		font-size: 28rpx !important;

		.uni-easyinput__content-input.data-v-abe12412 {
			text-align: left;
			height: 78rpx;
			line-height: 78rpx;
			font-size: 28rpx !important;
		}

		.uni-forms-item__label.data-v-61dfc0d0 {
			height: 78rpx;
			line-height: 78rpx;
		}

		.uni-forms-item__inner.data-v-61dfc0d0 {
			height: 78rpx;
			line-height: 78rpx;
		}

		.uni-forms-item.data-v-61dfc0d0 {
			margin-bottom: 22rpx;
		}

		.uni-forms-item__label.data-v-61dfc0d0,
		.uni-forms-item__label.data-v-61dfc0d0 {
			width: 155rpx !important;
		}

		.return-form .uni-easyinput__content-input.data-v-abe12412 {
			border: 1rpx solid #ececec;
		}

		.uni-easyinput__content-input.data-v-abe12412 {
			border: 1rpx solid #ededed;
		}

		.submit-btn {
			position: fixed;
			bottom: 30rpx;
			width: 702rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			background: #D80E0E;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
